<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>投放点单界面广告</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" type="text/css" href="res/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="res/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="res/css/style.css">
    
    <script type="text/javascript" src="res/js/jquery-1.9.1.min.js"></script>

  </head>
  
  <body>
    <%@include file="../template/header.jsp" %>
    
    <div class="subHead">
        <div class="container">
            <h1>广告商管理后台</h1>
            <p class="lead">广告商可以在此投放广告、查看广告展现情况等。</p>
        </div>
    </div>
    <div class="row mainContent">
        
        <%@include file="../template/advertisementNav.jsp" %>
        
        <div class="span9">
            <form class="form-horizontal" method="post" enctype="multipart/form-data" action="advertisement/publishAdvertisement.htm">
            	<input type="hidden" name="position" value="1">
            
                <legend class="text-warning">点单界面广告投放</legend>
                <div class="control-group">
                    <label class="control-label" for="title">广告名称:</label>
                    <div class="controls">
                        <input type="text" id="title" name="title" placeholder="请输入商品名称">
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="image">广告图片:</label>
                    <div class="controls">
                        <input id="image" name="image" type="file">
                        <span class="help-inline">500*500像素</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="link">广告链接:</label>
                    <div class="controls">
                        <input id="link" name="link" type="text" placeholder="请输入广告跳转的链接">
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="expectShowNum">广告展现次数:</label>
                    <div class="controls">
                        <input type="text" id="expectShowNum" name="expectShowNum" placeholder="请输入展现次数">
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="categoryParentId">选择投放省份</label>
                    <div class="controls">
                       <select id="provinceId" name="provinceIds" multiple="multiple">
                       		<s:iterator value="#request.provinces" id="province">
                       			<option value='<s:property value="#province.id"/>'>
                       				<s:property value="#province.name"/>
                       			</option>
                       		</s:iterator>
                        </select>
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="times">选择投放时间:</label>
                    <div class="controls">
                        <input type="text" id="times" name="times" placeholder="请输入展现时刻">
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">感兴趣标签:</label>
                    <div class="controls">
                    	<s:iterator value="#request.tags" id="tag" >
                    		<label class="checkbox">
                            	<input type="checkbox" id="tagIds" name="tagIds" 
                            		value='<s:property value="#tag.id" />'><s:property value="#tag.name"/>
                        	</label>
                    	</s:iterator>
                    </div>
                </div>
                <div id="suggest" class="control-group hidden">
                    <div class="controls">
                        <span class="help-inline">
                        	<font id="desp1"></font>
                        	<font id="price" color="red"></font>
                        	<font id="desp2"></font>
                        </span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="bid">标签出价</label>
                    <div class="controls">
                        <input type="text" id="bid" name="bid" placeholder="输入商品的竞价" onfocus="calculateCpm()">
                        <span class="help-inline">单位为CPM</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">
                    	搜索关键字:
                    	<a href="#" class="btn btn-mini btn-success" onclick="addKeyword();return false;">添加</a>
                    	<a class="btn btn-mini btn-danger" onclick="deleteKeyword()">删除</a>
                    </label>
                    
                    <div id="keywordsCollection" class="controls">
                    	<div id="template" class="inline">
                    		<span class="help-inline">关键字:</span>
                    		<input type="text" id="keyword" name="keywords" class="input-small" placeholder="请输入关键字">
                    		<span class="help-inline">加价:</span>
                       		<input type="text" id="keywordPrice " name="keywordPrices" class="input-small" placeholder="请输入出价">
                    	</div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn btn-large btn-primary">提交广告</button>
                        <button type="reset" class="btn btn-large btn-warning">清空信息</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="footer">
        <p>版权所有： 银盒子计划团队</p>
    </div>

    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript">
        /*清除active样式*/
        $("li[name=advertisementNav]").each(function(){
        	var that = $(this);
        	that.removeClass("active");
        });
        $("#advertisementNav3").addClass("active");
        
        $("input[type=checkbox][name=tagIds]").each(function(){
        	var that = $(this);
        	that.on('change', function(){
                var suggest = $("#suggest");
                suggest.attr("class", "control-group hidden");
            });
        });
        
        /*异步获取建议价*/
        function calculateCpm(){
        	var tags = $("input[type=checkbox][name=tagIds]:checked");
        	var options = $("option:selected");
        	var showTimes = $("#times").val();
        	
        	if(showTimes == null || showTimes == ""){
        		showTimes = "0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23";
        	}
        	
        	var suggest = $("#suggest");
	        var desp1 = $("#desp1");
	        var desp2 = $("#desp2");
	        var price = $("#price");
        	
        	if(tags.length > 0){
        		var ids = new Array();
        		var pIds = new Array();
	        	for(var index = 0; index < tags.length; index++){
	        		ids.push(tags[index].value);
	        	}
	        	
	        	for(var index = 0; index < options.length; index++){
	        		pIds.push(options[index].value);
	        	}
	        	
	        	var params = decodeURIComponent($.param({tagIds : ids, provinceIds : pIds, showTimes : showTimes, position : 1}, true));
	        	
	        	$.ajax({
					type: "post",
					data: params,
					url: "advertisement/calculateCpm.htm",
					beforeSend: function(XMLHttpRequest){
						suggest.attr("class", "control-group");
						desp1.attr("class","hidden");
						price.attr("color","purple");
						price.html("已经获取洗系统建议价格......");
						desp2.attr("class","hidden");
					},
					success: function(data, textStatus){
						desp1.attr("class","");
						desp1.html("系统估算建议出价为每");
						price.attr("color","blue");
						price.html(data);
						desp2.attr("class","");
						desp2.html("元展示1000次");
					},
					error: function(){
						desp1.attr("class","hidden");
						price.attr("color","red");
						price.html("系统无法提供建议价......");
						desp2.attr("class","hidden");
					}
				});
        	}else{
        		suggest.attr("class", "control-group");
        		desp1.attr("class","hidden");
				price.attr("color","red");
				price.html("请选择兴趣标签获取系统建议价......");
				desp2.attr("class","hidden");
        	}
        	
        }
        
        
        function addKeyword(){
        	var template = $("#template").clone();
        	$("#keywordsCollection").append(template);
        }
        
        function deleteKeyword(){
        	var keywords = $("#keywordsCollection").find("div");
        	var size = keywords.size();
        	if(size > 1){
        		$("#keywordsCollection").find("div:last").remove();
        	}
        	
        	return false;
        }
        
    </script>
  </body>
</html>
